<template>

    <div class="demo-split">
        <Split v-model="split1" min="427px" max="200px">
            <div slot="left" class="demo-split-pane">
                <Tabs :animated="false">
                    <TabPane label="题目描述" icon="md-clipboard" class="labels">
                      <div class="problemPannel">
                        <h1>
                          {{problemData.problemId}}-  {{problemData.title}}
                        </h1>
                        <p>
                          难度：<span :style="difficultyColor">{{difficulty}}</span>
                          <span class="times">
                            通过次数&nbsp;&nbsp;&nbsp;<span>{{problemData.accepted}}</span>
                          </span>
                          <span class="times">
                            提交次数&nbsp;&nbsp;&nbsp;<span>{{problemData.submit}}</span>
                          </span>
                        </p><br/>
                        <hr/>
                        <p>时间限制：{{problemData.timeLimit}}秒</p>
                        <p>内存限制：{{problemData.memoryLimit}}MB</p>
                        <hr/>
                        <p v-html="problemData.description" class="description"></p><br/>
                        <h3>输入</h3><hr/>
                        <p class="description">{{problemData.input}}</p><br/>
                        <h3>输出</h3><hr/>
                        <p class="description">{{problemData.output}}</p><br/>
                        <h3>样例</h3><hr/>
                        <h4 class="sampleIOLabel">输入</h4>
                        <pre class="sampleIO"><p>{{problemData.sampleInput}}</p></pre>
                        <h4 class="sampleIOLabel">输出</h4>
                        <pre class="sampleIO"><p>{{problemData.sampleOutput}}</p></pre><br/>
                        <h3>提示</h3><hr/>
                        <ul type="point" class="hintList">
                          <li v-for="(hint, index) in problemData.hint" :key="index">
                            {{problemData.hint[index]}}
                          </li>
                        </ul>
                      </div>
                    </TabPane>
                    <TabPane label="题解" icon="md-key" class="labels">题解</TabPane>
                    <TabPane label="提交记录" icon="md-clock" class="labels">提交记录</TabPane>
                </Tabs>
                <div class="footBanner" style="justify-content: flex-end;">
                    <Button @click="value2 = true" type="default" icon="md-list" :style="{alignSelf:'flex-start'}">题目列表</Button>
                    <Button @click="randomProblem" type="default" icon="md-shuffle">随机一题</Button>
                    <Button type="default"><Icon type="ios-arrow-back" />上一题</Button>
                    <Button type="default">下一题<Icon type="ios-arrow-forward" /></Button>
                </div>

                <Drawer placement="left" :closable="false" v-model="value2">
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Drawer>
            </div>
            <div slot="right" class="demo-split-pane">
                <Monaco :get-problem="problemToMonaco"/>
            </div>
        </Split>
    </div>
</template>
<script>
  import axios from "axios";
  import Monaco from "@/components/monaco/Monaco"

  export default {
    inject:['reload'],
    name: 'problems',
    components: {
      Monaco
    },
    data() {
      return {
        split1: 0.5,
        value2: false,
        difficulty: "",
        difficultyColor: "",
        problemData: null,
        problemToMonaco:{
          problemId:0,
          timeLimit:0,
          memoryLimit:0
        }
      }
    },
    methods: {
      randomProblem() {
        axios.get(`http://localhost:8080/problem/rand/${this.problemData.problemId}`)
        .then(res=>{
          this.$router.push({path:'/problems/'+res.data.data});
          this.$router.go(0);
        });
      },
    },
    mounted() {
        axios.get(`http://localhost:8080/problem/get/${this.$route.params.id}`)
            .then(res=>{
                if(res.data.data == null) {
                  this.$router.push("/404");
                }
                this.problemData = res.data.data;
                switch(this.problemData.difficulty){
                  case "EASY":
                    this.difficulty = "简单";
                    this.difficultyColor = "color:green"
                    break;
                  case "COMMON":
                    this.difficulty = "中等";
                    this.difficultyColor = "color:orange";
                    break;
                  case "HARD":
                    this.difficulty = "困难";
                    this.difficultyColor = "color:red";
                    break;
                }
                let {problemId, timeLimit, memoryLimit} = res.data.data;
                this.problemToMonaco = {problemId, timeLimit, memoryLimit}
            });
    }
  }
</script>

<style src="../../../styles/pages/problemDetails.less" lang="less" scoped>
</style>
